<template>
    <div class="contion">
        <div class="steer">
            <div class="steer_1">
                <img src="../img/1.png" style="width:600px;height:600px" class="image">
                <span><b>迈向运动时尚</b></span>
                <span style="color:red;"><B>体验优质之选</B></span>
                <span style="font-size:20px">融合了尖端和时尚设计。无论是跑步、篮球或健身，我们为您提供最舒适、耐用的选择</span>
            </div>
            <div class="steer_2">
                <span style="font-size:20px;" @click="login">跳过</span>
                <el-button type="danger" @click="next">下一页</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const login=()=>{
    router.push('login')
}

const next=()=>{
    router.push('steer2')
}

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.steer{
    width: 700px;
    height: 700px;
}

.steer_1{
    display: flex;
    flex-direction: column;
    font-size:30px;
    text-align: center;
    vertical-align: middle;
}

.image{
    justify-content: center;
    align-items: center;
    margin-left: 50px;
}

.steer_2{
    margin-top: 100px;
}

.steer_2 button{
    width: 160px;
    height: 70px;
    background-color:#E44F32;
    border-radius: 10px;
    float: right;
}
</style>